<template>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="账号" prop="phone">
            <el-input v-model.number="ruleForm.phone" placeholder="手机号码" />
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input v-model="ruleForm.pass" type="password" autocomplete="off" placeholder="长度建议在6-16位,至少使用两种字符" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="Login(ruleFormRef)">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">

import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { UserService } from '@/utils/api'


const ruleFormRef = ref<FormInstance>()
//表单数据
const ruleForm = reactive({
    phone: '',
    pass: ''
})

//校验账号
const checkPhone = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('账号不能为空'))
    }
    setTimeout(() => {
        if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
            callback(new Error('请输入正确的手机号码'))
        } else {
            callback()
        }
    }, 1000)
}

//登录
const Login = (formEl: FormInstance | undefined) => {

}

//定义校验函数
const rules = reactive({
    phone: [{ validator: checkPhone, trigger: 'blur' }],
})

</script>

<style lang="scss" scoped>
form {
    position: absolute;
    left: 25%;
    right: 35%;
    top: 10%;
    padding: 0.2rem;
    border-radius: 0.1rem;

    background-color: rgb(246, 246, 248);
}
</style>
